<template>
  <!--  <div class="ad-table-form">-->
  <!--    <div class="ad-block">-->
  <!--      <div class="table-op">-->
  <!--        <el-button size="mini" type="primary" plain @click="addDriver">新增</el-button>-->
  <!--      </div>-->
  <div>

    <ad-table :data="driver.list" ux-grid ref="driverTable" keep-source :rules="rules"
              class="table"
              @row-click="selectDriverRow" :filterQuery="driverFilterQuery" @search="getList"
              :edit-config="{trigger: 'manual', autoClear: false, mode: 'row'}">
      <ad-table-column label="序号" type="index" ctype="index"/>
      <ad-table-column label="司机名称" prop="driverName" edit-render width="120">
        <template v-slot:edit="{row}">
          <!--            <el-input size="mini" v-model="row.type" edit-render />-->
          <el-input size="mini" v-model="row.driverName" maxLength="10"/>
        </template>
      </ad-table-column>
      <ad-table-column label="联系电话" prop="phone" edit-render width="120">
        <template v-slot:edit="{row}">
          <el-input size="mini" v-model="row.phone" maxLength="13"/>
        </template>
      </ad-table-column>
      <ad-table-column label="身份证号码" prop="driverCardNumber" edit-render width="120">
        <template v-slot:edit="{row}">
          <el-input size="mini" v-model="row.driverCardNumber" maxLength="18"/>
        </template>
      </ad-table-column>
      <ad-table-column label="车牌号码" prop="licensePlateNumber" edit-render width="120">
        <template v-slot:edit="{row}">
          <el-input size="mini" v-model="row.licensePlateNumber" maxLength="17"/>
        </template>
      </ad-table-column>
      <ad-table-column label="司机类型" prop="type" dictName="driver_type" edit-render width="120">
        <template v-slot:edit="{row}">
          <ad-status-select size="mini" v-model="row.type" :dict="dict.driver_type"/>
        </template>
      </ad-table-column>
      <ad-table-column label="操作" width="150">
        <template v-slot="{row}">
          <template v-if="driverTable.isActiveByRow(row)">
            <el-button size="mini" type="primary" plain @click="editDriver(row)">保存</el-button>
            <el-button size="mini" type="primary" plain @click="cancel(row)">取消</el-button>
          </template>
          <template v-else>
            <el-button size="mini" type="primary" plain @click="selectData(row)">选择</el-button>
          </template>
        </template>
      </ad-table-column>
    </ad-table>
    <!--      <ux-grid :data="driver.list" ref="tableTest" :edit-config="{trigger: 'click', mode: 'row'}">-->
    <!--        <ux-table-column title="司机姓名" field="name" edit-render>-->
    <!--          <template v-slot:edit="{row}">-->
    <!--            <el-input v-model="row.name"/>-->
    <!--          </template>-->
    <!--        </ux-table-column>-->
    <!--      </ux-grid>-->
    <!--    </div>-->
    <!--  </div>-->
  </div>
</template>

<script>
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import AdStatusSelect from '@/components/AdStatusSelect'
  // import { getList as getDriverList, add as addDriver, edit as editDriver, del as delDriver }from '@/api/pick/wait'
  import api from '@/api/pick/wait'

  export default {
    components: {AdTable, AdTableColumn, AdStatusSelect},
    dicts: ['driver_type'],
    data() {
      return {
        driverTable: null,
        isSave: false,
        driverFilterQuery: {},
        driver: {
          initLoading: true,
          list: [],
          summary: {}
        },
        rules: {
          driverName: [{required: true, message: '请输入司机名称'}],
          phone: [{required: true, message: '请输入联系电话'}],
          type: [{required: true, message: '请选择司机类型'}],
        }
      }
    },
    watch: {
      '$attrs.visible': {
        immediate: true,
        handler(visible) {
          if (visible) {
            this.isSave = false;
            this.getList()
          }
        }
      }
    },
    created() {
      this.getList()
    },
    mounted() {
      this.driverTable = this.$refs.driverTable.$children[0]
      // this.driverTable = this.$refs.tableTest
    },
    methods: {
      async addDriver() {
        if (this.isSave) {
          this.$notify({
            title: '新增',
            message: '请先保存',
            position: 'bottom-right',
            type: 'error'
          });
          return
        }
        const {row} = await this.driverTable.insertRow({type: '', name: ''}, -1)
        await this.driverTable.setActiveRow(row)
        this.isSave = true;
      },
      edit(row) {
        this.driverTable.setActiveRow(row)
        this.isSave = true;
      },
      cancel(row) {
        if (row.id) {
          this.driverTable.clearActived().then(() => {
            this.driverTable.revertData(row)
          })
        } else {
          this.driverTable.remove(row)
        }
        this.isSave = false;
      },
      editDriver(row) {
        let falg = false
        this.driver.list.forEach(d => {
          if (d.phone == row.phone) {
            falg = true
          }
        })
        if (falg) {
          this.$notify({
            title: '保存',
            message: '电话号码已存在，请直接选择对应的司机！',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        this.driverTable.validate(row).then(data => {
          if (data) return
          this.isSave = false;
          // console.log(row)
          // if (row.id) {  // 修改
          //   if (this.driverTable.isUpdateByRow(row)) {
          //     api.updataExtraFee(row).then(res => {
          //       this.driverTable.clearActived()
          //     })
          //   }
          // } else {  // 新增
          let ajaxData = {...row};
          ajaxData.companyId = this.$attrs.id;
          ajaxData.name = ajaxData.driverName;
          ajaxData.cardNumber = ajaxData.driverCardNumber;
          api.addNewDriver(ajaxData).then(res => {
            if (res.code == 0) {
              ajaxData.driverId = res.data.id;
              this.selectData(ajaxData)
            }
            // this.driverTable.clearActived()
            // this.getList()
          })
          // }
        })
      },
      delDriver(row) {
        this.$confirm('确定删除吗？', '删除').then(() => {
          delDriver({id: row.id}).then(res => {
            this.driverTable.remove(row)
          })
        }).catch(err => {
        })
      },
      selectDriverRow(row) {
        // this.$emit('select', row)
      },
      selectData(row) {
        this.$emit('select', row)
      },
      getList: function () {
        let self = this;
        api.getDriver(self.$attrs.id).then((res => {
          if (res.data.length > 0) {
            res.data.forEach(d => {
              d.driverName = d.name;
              d.driverCardNumber = d.cardNumber;
              d.driverId = d.id;
            })
          }
          self.driver.list = res.data
        }))
      },
    }
  }
</script>

<style lang="scss" scoped>
  .table {
    height: 300px;
  }

  .table-op {
    margin: 0 0 12px 0;
    text-align: right;
  }

  ::v-deep .ad-table.ad-table__ux-grid {
    .elx-table-th {
      height: 38px !important;
      font-size: 12px;
    }

    .elx-table-td {
      padding-top: 5px;
      padding-bottom: 5px;
      font-size: 12px;
    }
  }
</style>